<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/charts.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/chart-design.css}" />
    <title>[[${bundle.L('ChartDesign')}]]</title>
  </head>
  <body>
    <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo rb-offcanvas-menu">
      <th:block th:replace="~{/_include/nav-top}" />
      <div class="rb-content">
        <aside class="data-aside">
          <div class="rb-scroller">
            <div class="data-info">
              <h5>[[${bundle.L('DataSource')}]]</h5>
              <ul class="list-unstyled esource">
                <li>
                  <a>
                    <i class="zmdi icon" th:classappend="|zmdi-${entityIcon}|"></i>
                    [[${entityLabel}]]
                    <span class="J_filter" th:title="${bundle.L('SetAdvFiletr')}"><i class="zmdi zmdi-filter-list"></i></span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="data-info">
              <h5>[[${bundle.L('Field')}]]</h5>
              <ul class="list-unstyled fields">
                <th:block th:each="field : ${availableFields}">
                  <li th:class="${field[2]}"><a th:title="${field[1]}" th:data-field="${field[0]}" th:data-type="${field[2]}">[[${field[1]}]]</a></li>
                </th:block>
              </ul>
            </div>
          </div>
        </aside>
        <aside class="config-aside">
          <div class="rb-scroller">
            <div class="data-info">
              <h5>[[${bundle.L('ChartName')}]]</h5>
              <div class="input">
                <input class="form-control form-control-sm" th:placeholder="${bundle.L('UnnameChart')}" id="chart-title" th:value="${chartTitle}" />
              </div>
            </div>
            <div class="data-info">
              <h5>[[${bundle.L('ChartType')}]]</h5>
              <div class="chart-type">
                <a th:title="${bundle.L('ChartTABLE')}" data-type="TABLE" data-allow-dims="0|3" data-allow-nums="0|9"><i class="C200"></i></a>
                <a th:title="${bundle.L('ChartINDEX')}" data-type="INDEX" data-allow-dims="0|0" data-allow-nums="1|1"><i class="C310"></i></a>
                <a th:title="${bundle.L('ChartLINE')}" data-type="LINE" data-allow-dims="1|1" data-allow-nums="1|9"><i class="C220"></i></a>
                <a th:title="${bundle.L('ChartBAR')}" data-type="BAR" data-allow-dims="1|1" data-allow-nums="1|9"><i class="C210"></i></a>
                <a th:title="${bundle.L('ChartPIE')}" data-type="PIE" data-allow-dims="1|1" data-allow-nums="1|1"><i class="C230"></i></a>
                <a th:title="${bundle.L('ChartFUNNEL')}" data-type="FUNNEL" data-allow-dims="0|1" data-allow-nums="1|9"><i class="C330"></i></a>
                <a th:title="${bundle.L('ChartTREEMAP')}" data-type="TREEMAP" data-allow-dims="1|3" data-allow-nums="1|1"><i class="C370"></i></a>
                <a th:title="${bundle.L('ChartRADAR')}" data-type="RADAR" data-allow-dims="1|1" data-allow-nums="1|3"><i class="C290"></i></a>
                <a th:title="${bundle.L('ChartSCATTER')}" data-type="SCATTER" data-allow-dims="0|3" data-allow-nums="2|2"><i class="C280"></i></a>
                <!--
                <a th:title="${bundle.L('ChartBARNEGATIVE')}" data-type="BARNEGATIVE" data-allow-dims="1|1" data-allow-nums="2|2"><i class="C243"></i></a>
                <a th:title="${bundle.L('ChartDOLOR')}" data-type="DOLOR" data-allow-dims="1|1" data-allow-nums="0|0"><i class="C340"></i></a>
                <a th:title="${bundle.L('ChartCNMAP')}" data-type="CNMAP" data-allow-dims="1|1" data-allow-nums="1|1"><i class="C271"></i></a>
                <a th:title="${bundle.L('ChartSUNBURST')}" data-type="SUNBURST" data-allow-dims="2|3" data-allow-nums="1|1"><i class="C360"></i></a>
                -->
              </div>
            </div>
            <div class="data-info mt-3">
              <h5>[[${bundle.L('ChartOption')}]]</h5>
              <div class="pl-1 mt-3 chart-option">
                <div class="J_opt-UNDEF">[[${bundle.L('ChartNoOptionTips')}]]</div>
                <div class="hide J_opt-ALL">
                  <label class="custom-control custom-control-sm custom-checkbox mb-2 admin-show">
                    <input class="custom-control-input" type="checkbox" data-name="noPrivileges" />
                    <span class="custom-control-label"> [[${bundle.L('ChartUseAllData')}]] <i class="zmdi zmdi-help zicon" th:title="${bundle.L('ChartUseAllDataTips')}"></i></span>
                  </label>
                  <label class="custom-control custom-control-sm custom-checkbox mb-2">
                    <input class="custom-control-input" type="checkbox" data-name="shareChart" />
                    <span class="custom-control-label"> [[${bundle.L('ChartShare')}]] <i class="zmdi zmdi-help zicon" th:title="${bundle.L('ChartShareTips')}"></i></span>
                  </label>
                  <label class="custom-control custom-control-sm custom-checkbox mb-2 hide">
                    <input class="custom-control-input" type="checkbox" data-name="noZero" />
                    <span class="custom-control-label"> [[${bundle.L('ChartNotUseNullData')}]]</span>
                  </label>
                </div>
                <div class="hide J_opt-TABLE">
                  <label class="custom-control custom-control-sm custom-checkbox mb-2">
                    <input class="custom-control-input" type="checkbox" data-name="showLineNumber" />
                    <span class="custom-control-label"> [[${bundle.L('ChartShowLine')}]]</span>
                  </label>
                  <label class="custom-control custom-control-sm custom-checkbox">
                    <input class="custom-control-input" type="checkbox" data-name="showSums" />
                    <span class="custom-control-label"> [[${bundle.L('ChartShowCount')}]]</span>
                  </label>
                </div>
                <div class="hide J_opt-LINE J_opt-BAR J_opt-PIE J_opt-FUNNEL J_opt-TREEMAP J_opt-RADAR J_opt-SCATTER">
                  <label class="custom-control custom-control-sm custom-checkbox mb-2">
                    <input class="custom-control-input" type="checkbox" data-name="showNumerical" />
                    <span class="custom-control-label"> [[${bundle.L('ChartShowDataOnChart')}]]</span>
                  </label>
                </div>
                <div class="hide J_opt-LINE J_opt-BAR J_opt-SCATTER">
                  <label class="custom-control custom-control-sm custom-checkbox mb-2">
                    <input class="custom-control-input" type="checkbox" data-name="showGrid" />
                    <span class="custom-control-label"> [[${bundle.L('ChartShowGrid')}]]</span>
                  </label>
                </div>
                <div class="hide J_opt-LINE J_opt-BAR J_opt-PIE J_opt-FUNNEL J_opt-RADAR J_opt-SCATTER">
                  <label class="custom-control custom-control-sm custom-checkbox mb-2">
                    <input class="custom-control-input" type="checkbox" data-name="showLegend" />
                    <span class="custom-control-label"> [[${bundle.L('ChartShowLegend')}]]</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </aside>
        <div class="main-content container-fluid">
          <div class="axis-editor">
            <div class="axis J_dimension">
              <div class="axis-head">
                <span class="text-uppercase">[[${bundle.L('ChartDimension')}]]</span>
                <a><i class="zmdi zmdi-edit"></i></a>
              </div>
              <div class="axis-target J_axis-dim"></div>
            </div>
            <div class="axis J_numerical">
              <div class="axis-head">
                <span class="text-uppercase">[[${bundle.L('ChartNumerical')}]]</span>
                <a><i class="zmdi zmdi-edit"></i></a>
              </div>
              <div class="axis-target J_axis-num"></div>
            </div>
          </div>
          <div id="chart-preview"></div>
        </div>
      </div>
    </div>
    <script type="text/plain" id="axis-item">
        <span>
          <div class="item" data-toggle="dropdown">
            <a><i class="zmdi zmdi-chevron-down"></i></a>
            <span></span>
            <a class="del"><i class="zmdi zmdi-close-circle"></i></a>
          </div>
          <ul class="dropdown-menu">
            <li class="dropdown-item J_num" data-calc="SUM">[[${bundle.L('CalcSUM')}]]</li>
            <li class="dropdown-item J_num" data-calc="AVG">[[${bundle.L('CalcAVG')}]]</li>
            <li class="dropdown-item J_num" data-calc="MAX">[[${bundle.L('CalcMAX')}]]</li>
            <li class="dropdown-item J_num" data-calc="MIN">[[${bundle.L('CalcMIN')}]]</li>
            <li class="dropdown-item J_text" data-calc="COUNT">[[${bundle.L('CalcCOUNT')}]]</li>
            <li class="dropdown-item J_text" data-calc="COUNT2">[[${bundle.L('CalcCOUNT2')}]]</li>
            <li class="dropdown-item J_date" data-calc="Y">[[${bundle.L('CalcDateY')}]]</li>
            <li class="dropdown-item J_date" data-calc="Q">[[${bundle.L('CalcDateQ')}]]</li>
            <li class="dropdown-item J_date" data-calc="M">[[${bundle.L('CalcDateM')}]]</li>
            <li class="dropdown-item J_date" data-calc="D">[[${bundle.L('CalcDateD')}]]</li>
            <li class="dropdown-item J_date" data-calc="H">[[${bundle.L('CalcDateH')}]]</li>
            <li class="dropdown-item J_clazz" data-calc="L1">[[${bundle.L('CalcClass1Level')}]]</li>
            <li class="dropdown-item J_clazz" data-calc="L2">[[${bundle.L('CalcClass2Level')}]]</li>
            <li class="dropdown-item J_clazz" data-calc="L3">[[${bundle.L('CalcClass3Level')}]]</li>
            <li class="dropdown-item J_clazz" data-calc="L4">[[${bundle.L('CalcClass4Level')}]]</li>
            <li class="dropdown-divider"></li>
            <li class="dropdown-submenu J_sort">
              <a class="dropdown-item">[[${bundle.L('Sort')}]]</a>
              <ul class="dropdown-menu">
                <li class="dropdown-item" data-sort="NONE">[[${bundle.L('Default')}]]</li>
                <li class="dropdown-item" data-sort="ASC">[[${bundle.L('SortAsc')}]]</li>
                <li class="dropdown-item" data-sort="DESC">[[${bundle.L('SortDesc')}]]</li>
              </ul>
            </li>
            <li class="dropdown-item">[[${bundle.L('ShowStyles')}]]</li>
          </ul>
      </span>
    </script>
    <th:block th:replace="~{/_include/footer}" />
    <script>
      window.__PageConfig = {
        sourceEntity: '[[${entityName}]]',
        chartId: '[[${chartId}]]',
        chartConfig: _$unthy('[[${chartConfig}]]'),
        chartOwningAdmin: '[[${chartOwningAdmin}]]' === 'true',
      }
    </script>
    <script th:src="@{/assets/lib/charts/echarts.min.js}"></script>
    <script th:src="@{/assets/js/charts/charts.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/rb-advfilter.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/charts/chart-design.js}" type="text/babel"></script>
  </body>
</html>
